"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { 
  MessageCircle, 
  Sparkles, 
  X,
  ArrowRight,
  HelpCircle,
  Lightbulb
} from "lucide-react"
import { useRouter } from "next/navigation"

interface AiTipsProps {
  context: string
  suggestedQuestions?: string[]
  position?: 'top-right' | 'bottom-right' | 'inline'
  size?: 'sm' | 'md' | 'lg'
  variant?: 'floating' | 'inline' | 'minimal'
}

export function AiTips({ 
  context, 
  suggestedQuestions = [], 
  position = 'top-right',
  size = 'md',
  variant = 'floating'
}: AiTipsProps) {
  const [isExpanded, setIsExpanded] = useState(false)
  const router = useRouter()

  const handleAskAI = (question?: string) => {
    const params = new URLSearchParams({
      context,
      ...(question && { question })
    })
    router.push(`/chat?${params.toString()}`)
  }

  if (variant === 'minimal') {
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={() => handleAskAI()}
        className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 p-1"
      >
        <HelpCircle className="w-4 h-4" />
      </Button>
    )
  }

  if (variant === 'inline') {
    return (
      <div className="inline-flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => handleAskAI()}
          className="border-blue-200 text-blue-600 hover:bg-blue-50"
        >
          <Lightbulb className="w-4 h-4 mr-1" />
          问AI
        </Button>
        {suggestedQuestions.length > 0 && (
          <div className="flex gap-1">
            {suggestedQuestions.slice(0, 2).map((question, index) => (
              <Button
                key={index}
                variant="ghost"
                size="sm"
                onClick={() => handleAskAI(question)}
                className="text-xs text-blue-600 hover:bg-blue-50 px-2 py-1 h-auto"
              >
                {question}
              </Button>
            ))}
          </div>
        )}
      </div>
    )
  }

  // Floating variant
  const positionClasses = {
    'top-right': 'fixed top-20 right-4 z-50',
    'bottom-right': 'fixed bottom-4 right-4 z-50',
    'inline': 'relative'
  }

  const sizeClasses = {
    'sm': 'w-8 h-8',
    'md': 'w-12 h-12',
    'lg': 'w-16 h-16'
  }

  return (
    <div className={positionClasses[position]}>
      {!isExpanded ? (
        <Button
          onClick={() => setIsExpanded(true)}
          className={`${sizeClasses[size]} rounded-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-lg hover:shadow-xl transition-all duration-300 animate-pulse`}
        >
          <Sparkles className="w-5 h-5 text-white" />
        </Button>
      ) : (
        <div className="bg-white rounded-lg shadow-xl border border-blue-200 p-4 w-80 max-w-sm">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center">
                <MessageCircle className="w-4 h-4 text-white" />
              </div>
              <span className="font-semibold text-gray-900">AI助手</span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsExpanded(false)}
              className="h-6 w-6 p-0"
            >
              <X className="w-4 h-4" />
            </Button>
          </div>
          
          <p className="text-sm text-gray-600 mb-3">
            对当前内容有疑问？让AI助手来帮你解答！
          </p>

          <div className="space-y-2">
            <Button
              onClick={() => handleAskAI()}
              className="w-full bg-blue-500 hover:bg-blue-600 text-white"
              size="sm"
            >
              <MessageCircle className="w-4 h-4 mr-2" />
              直接提问
              <ArrowRight className="w-4 h-4 ml-2" />
            </Button>

            {suggestedQuestions.length > 0 && (
              <div className="space-y-1">
                <p className="text-xs text-gray-500 font-medium">推荐问题：</p>
                {suggestedQuestions.map((question, index) => (
                  <Button
                    key={index}
                    variant="outline"
                    size="sm"
                    onClick={() => handleAskAI(question)}
                    className="w-full text-left justify-start text-xs border-blue-200 text-blue-600 hover:bg-blue-50"
                  >
                    {question}
                  </Button>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}

// 预设的上下文和问题模板
export const AI_CONTEXTS = {
  // 首页相关
  homepage: {
    context: "用户正在查看首页，了解个人发展系统的整体流程",
    questions: [
      "这个系统是如何帮助我规划专业方向的？",
      "我需要完成哪些步骤才能获得推荐？",
      "测评结果的准确性如何保证？"
    ]
  },
  
  // 个人信息完善
  profileSetup: {
    context: "用户正在完善个人信息，包括证书、实习、项目等",
    questions: [
      "为什么需要填写这些个人信息？",
      "这些信息如何影响我的专业推荐？",
      "如果我暂时没有相关经历怎么办？"
    ]
  },
  
  // 问卷测评
  questionnaire: {
    context: "用户正在进行专业测评问卷",
    questions: [
      "这些测评题目是基于什么理论设计的？",
      "如何确保我的回答是真实有效的？",
      "测评结果会如何影响我的专业推荐？"
    ]
  },
  
  // 个人画像
  profile: {
    context: "用户正在查看个人能力画像和分析结果",
    questions: [
      "K+MAQ能力模型是什么意思？",
      "我的能力分析结果准确吗？",
      "如何根据这个结果改进自己？"
    ]
  },
  
  // 专业推荐
  recommendation: {
    context: "用户正在查看专业方向推荐结果",
    questions: [
      "帮我设计一下这个项目方向的职业规划",
      "根据课表，做一下大学四年规划",
    ]
  },
  
  // 课程相关
  courses: {
    context: "用户正在查看课程信息和安排",
    questions: [
      "这些课程的难度如何？",
      "课程之间的先后顺序重要吗？",
      "如何制定个人学习计划？"
    ]
  },
  
  // 简历生成
  resume: {
    context: "用户正在生成或编辑个人简历",
    questions: [
      "如何让我的简历更有竞争力？",
      "简历中哪些内容最重要？",
      "如何突出我的专业优势？"
    ]
  }
}
